<template>
<div>
	<content_top title="用户列表"></content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>筛选查询</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="query">查询结果</Button>
					<Button @click="filter_show=true">高级检索</Button>
				</ButtonGroup>
				<div class="g_other">
					<a @click="clear_data"> 清除筛选</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Form  :label-width="90" style="width: 100%" inline>
				<FormItem label="员工账号：">
					<Input v-model="filter.username" placeholder="员工编号"></Input>
				</FormItem>
				<FormItem label="员工名称：">
					<Input v-model="filter.name" placeholder="中文名/英文名"></Input>
				</FormItem>
				<FormItem label="注册时间：">
					<DatePicker v-model="filter.reg_time" type="date" placeholder="yyyy-MM-dd" style="width: 150px" @on-change="month_change"></DatePicker>
				</FormItem>
				
				
			</Form>
		</div>
	</div>
	
	<div class="g_box">
		<div class="g_head">
			<h3>数据列表</h3>
			
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button >群发站内信</Button>
					<Button @click="$router.push({name:'user_add'})">新增员工</Button>
				</ButtonGroup>
				<div class="g_other">
					
				</div>
			</div>
		</div>
		<div class="g_box_con">
			<Table ref="table" :columns="Columns" :data="list" style="width: 100%;" :border="true"></Table>
			<div style="font-size: 14px;overflow: hidden;padding: 10px;">
				<div style="float:left;">
					<Select v-model="batch_act" style="width:100px;;">
						<Option value="" >请选择</Option>
						<Option value="enable">启用</Option>
						<Option value="disconnected">停用</Option>
						<Option value="delete" >删除</Option>
					</Select>
					<Button @click="batch_action">确定</Button>
				</div>
				<div style="float:right;">
					<Page :total="count" show-elevator show-total @on-change="goto_page" />
				</div>
			</div>
		</div>
	</div>
	
	<Modal
        v-model="filter_show"
        title="高级检索"
        @on-ok="query"
        >
        <div>
			<Form  :label-width="90" style="width: 100%" inline>
				<Row>
					<Col span="12">
						<FormItem label="员工编号：">
							<Input v-model="filter.username" placeholder="员工编号" style="width:150px;"></Input>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem label="中文名：">
							<Input v-model="filter.name" placeholder="中文名/英文名" style="width:150px;"></Input>
						</FormItem>
					</Col>
				</Row>
				
				<Row>
					<Col span="12">
						<FormItem label="公司主体：">
							<company_list v-model="filter.company" field="sx_name" style="width:150px;"></company_list>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem label="所属部门：">
							<bumen_filter v-model="filter.bumen" field="name" style="width:150px;"></bumen_filter>
						</FormItem>
					</Col>
				</Row>
				
				<Row>
					<Col span="12">
						<FormItem label="所在地：">
							<region_list v-model="filter.region" field="name" style="width:150px;"></region_list>
						</FormItem>
					</Col>
					<Col span="12">
						<FormItem label="注册时间：">
							<DatePicker type="date" placeholder="请选择时间" style="width: 150px" @on-change="month_change"></DatePicker>
						</FormItem>
					</Col>
				</Row>
			</Form>
		</div>
    </Modal>
	
</div>
</template>

<script>
import region_list from '@/themes/components/region_list';
import company_list from '@/themes/components/company_list';
import bumen_filter from '@/themes/components/bumen_filter';

export default {
    name: 'user_list',
    components:{
		region_list,
		company_list,
		bumen_filter,
	  },
    data () {
		let self = this;
        return {
            Columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
                    title: '员工编号',
					key: 'username',
					width: 120,
                },
				{
                    title: '中文名',
					key: 'nickname',
					width: 120,
                },
				{
                    title: '英文名',
					key: 'en_name',
					width: 120,
                },
				{
                    title: '公司主体',
					key: 'company',
					width: 120,
                },
				{
                    title: '所属部门',
					key: 'bumen',
					width: 120,
                },
				{
                    title: '所在地',
					key: 'region',
					width: 120,
                },
				{
                    title: 'Email',
					key: 'email',
					width: 120,
                },
				{
                    title: '账户启用状态',
					key: 'mobile',
					width: 120,
					render: (h, params) => {
						return h('i-switch',{
							props:{
								'true-value':1,
								'false-value':0,
								value:parseInt(params.row.is_enable)
							},
							on:{
								'on-change':function(val){
									
									self.set_enable(params.row.id,val);
								}
							}
						});
					}
                },
				{
					title: '操作',
					key: 'action',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										
										this.$router.push({name:'user_view',params:{'id':params.row.id}});
									}
								}
							}, '查看'),
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										
										this.$router.push({name:'user_info',params:{'id':params.row.id}});
									}
								}
							}, '编辑'),
							h('Button', {
								props: {
									type: 'error',
									size: 'small',
								},
								style: {
									display:params.row.username =='admin'?'none':'inline-block'
								},
								on: {
									click: () => {
										this.remove(params.row.id)
									}
								}
							}, '删除')
						]);
					}
				}
            ],
            list: [],
			count:0,
			page:1,
			filter:{
				username:'',
				name:'',
				reg_time:'',
				company:'',
				bumen:'',
				region:''
			},
			batch_act:'',
			filter_show:false
        };
    },
	created(){
		
		this.load_data();
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = {
				f:this.filter,
				page:this.page
			}
			
			Whttp.load('User/User/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		remove(id){
			if(!confirm('是否删除')){
				return;
			}
			var self = this;
			var postdata = {
				id:id
			};
			Whttp.load('User/User/del',postdata,function(result){
				self.load_data();
			});
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		query(){
			this.page = 1;
			this.load_data();
		},
		month_change(time){
			this.filter.reg_time = time;
		},
		batch_action(){
			var ids = [];
			if(this.batch_act=='delete'){
				if(!confirm('是否批量删除该成员')){
					return false;
				}
			}
			
			var sels = this.$refs['table'].getSelection();
			
			for(var i=0;i<sels.length;i++){
				ids.push(sels[i].id);
			}
			
			var self = this;
			var postdata = {
				ids:ids,
				act:this.batch_act
			};
			Whttp.load('User/User/batch_act',postdata,function(result){
				self.load_data();
				self.$Message.info('操作成功');
				self.batch_act = '';
			});
			
			
		},
		set_enable(id,status){
			var self = this;
			var postdata = {
				id:id,
				status:status
			};
			Whttp.load('User/User/set_enable',postdata,function(result){
				self.$Message.info('操作成功');
			});
		},
		clear_data(){
			this.filter = this._getData(this.default_filter);
		}
	}
};
</script>